<template>
  <div class="tc-con">
    <div id="tc-chain" class="tc-chain"></div>
  </div>
</template>
  <script>
import G6 from "@antv/g6";
import insertCss from "insert-css";
export default {
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.init();
    this.chainInit();
  },
  methods: {
    init() {},
    chainInit() {
      const data = {
        name: "光伏发电技术",
        children: [
          {
            name: "光伏电站",
            children: [
              {
                name: "集中式电站",
              },
              {
                name: "分布式电站",
              },
              {
                name: "光伏电站运行维护",
              },
            ],
          },
          {
            name: "光伏回收",
            children: [
              {
                name: "晶硅光伏组件回收",
              },
            ],
          },
          {
            name: "高效光伏电池",
            children: [
              {
                name: "单节钙钛矿电池",
              },
              {
                name: "电磁炮",
              },
            ],
          },
        ],
      };
      G6.registerNode(
        "tree-node",
        {
          drawShape: function drawShape(cfg, group) {
            const hasChildren = cfg.children && cfg.children.length > 0;
            if (hasChildren) {
              const rect = group.addShape("rect", {
                attrs: {
                  fill: "#999", // 背景色
                  // stroke: "#fff",
                  x: 0,
                  y: 0,
                  width: 1,
                  height: 1,
                  radius: [4],
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: "rect-shape",
              });
              const content = cfg.name.replace(/(.{19})/g, "$1\n");
              const text = group.addShape("text", {
                attrs: {
                  text: content,
                  x: 0,
                  y: 0,
                  textAlign: "left",
                  textBaseline: "middle",
                  fill: "#fff",
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: "text-shape",
              });
              const bbox = text.getBBox();
              rect.attr({
                x: -bbox.width / 2 - 4,
                y: -bbox.height / 2 - 6,
                // width: bbox.width + (hasChildren ? 26 : 12),
                width: bbox.width + 8,
                height: bbox.height + 12,
              });
              text.attr({
                x: -bbox.width / 2,
                y: 0,
              });
              return rect;
            } else {
              group.addShape("path", {
                attrs: {
                  x: 0,
                  y: -5,
                  path: [
                    ["M", 0, 0],
                    ["L", 100, 0],
                  ],
                  stroke: "#A3B1BF",
                  lineWidth: 1,
                  lineAppendWidth: 0,
                },
                // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
                name: "path-shape",
              });
              const content = cfg.name.replace(/(.{19})/g, "$1\n");
              const text = group.addShape("text", {
                attrs: {
                  text: content,
                  x: -50,
                  y: 0,
                  textAlign: "left",
                  textBaseline: "top",
                  fill: "#333",
                },
                name: "text-shape",
              });
              const bbox = text.getBBox();
              // text.attr({
              //   x: -bbox.width / 2,
              //   y: 0,
              // });
              return text;
            }
          },
        },
        "single-node"
      );

      insertCss(`
        .g6-component-tooltip {
          background-color: rgba(255, 255, 255, 0.8);
          padding: 0px 10px 24px 10px;
          box-shadow: rgb(174, 174, 174) 0px 0px 10px;
        }
        .g6-component-contextmenu {
          padding: 5px 0;
        }
        .g6-component-contextmenu ul {
          margin: 0;
          text-align: center;
        }
        .g6-component-contextmenu ul li {
          padding: 6px 20px;
          cursor: pointer;
        }
        .g6-component-contextmenu ul li:hover {
          background-color: #EEEEEE;
        }
      `);

      const contextMenu = new G6.Menu({
        getContent(evt) {
          return `<ul>
                    <li type="first">相关专利</li>
                    <li type="second">相关机构</li>
                    <li type="three">相关专家</li>
                    <li type="four">相关资讯</li>
                  </ul>`;
        },
        handleMenuClick: (target, item) => {
          const model = item.getModel();
          console.log(target.type, model);
          this.$emit("rightClick", model, "tech", target.type);
        },
        // offsetX and offsetY include the padding of the parent container
        // 需要加上父级容器的 padding-left 16 与自身偏移量 10
        offsetX: 0,
        // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
        offsetY: -320,
        // the types of items that allow the menu show up
        // 在哪些类型的元素上响应
        itemTypes: ["node"],
      });

      const tooltip = new G6.Tooltip({
        offsetX: 0,
        offsetY: -320,
        // v4.2.1 起支持配置 trigger，click 代表点击后出现 tooltip。默认为 mouseenter
        trigger: "click",
        // the types of items that allow the tooltip show up
        // 允许出现 tooltip 的 item 类型
        itemTypes: ["node"],
        // custom the tooltip's content
        // 自定义 tooltip 内容
        getContent: (e) => {
          const outDiv = document.createElement("div");
          outDiv.style.width = "fit-content";
          //outDiv.style.padding = '0px 0px 20px 0px';
          outDiv.innerHTML = `<h4>Custom Content</h4>
            <ul>
              <li>Type: ${e.item.getType()}</li>
            </ul>
            <ul>
              <li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
            </ul>`;
          return outDiv;
        },
      });

      const container = document.getElementById("tc-chain");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      const graph = new G6.TreeGraph({
        container: "tc-chain",
        width,
        height,
        modes: {
          default: ["drag-canvas"],
          // "zoom-canvas",
        },
        linkCenter: true,
        plugins: [tooltip, contextMenu],
        defaultNode: {
          type: "tree-node",
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        defaultEdge: {
          // type: "polyline",
          type: "cubic-horizontal",
          style: {
            radius: 10,
            offset: 30,
            stroke: "#A3B1BF",
          },
        },
        layout: {
          type: "compactBox",
          direction: "LR",
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 20;
          },
          getHGap: function getHGap() {
            return 80;
          },
        },
      });

      graph.data(data);
      graph.render();
      graph.fitView();

      // 单击树节点
      graph.on("node:click", (evt) => {
        // const item = evt.item;
        const model = evt.item.getModel();
        // console.log(model);
        this.$emit("clickNode", model, "tech");
      });

      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
  },
  components: {},
};
</script>
  <style lang="scss" scoped>
.tc-con {
  .tc-chain {
    position: relative;
  }
}
</style>